<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题列表 - 睿途题库</title>
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/remixicon.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <link href="assets/css/ruitu.css" rel="stylesheet">
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col bg-education">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="flex items-center justify-between px-4 h-[72px] max-w-7xl mx-auto">
            <div class="flex items-center flex-1 justify-center">
                <a href="admin-dashboard.html" class="flex items-center space-x-2 mr-6 absolute left-4">
                    <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <i class="ri-question-answer-line text-lg"></i>
                    </div>
                    <h1 class="text-lg font-bold text-dark">睿途题库管理系统</h1>
                </a>
                
                <!-- 顶部导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="admin-dashboard.html" class="nav-item" data-section="dashboard" onclick="showMenu('dashboard-menu')">
                        <i class="ri-dashboard-line mr-2"></i> 仪表盘
                    </a>
                    <a href="#" class="nav-item" data-section="textbook" onclick="showMenu('textbook-menu')">
                        <i class="ri-book-open-line mr-2"></i> 教材版本
                    </a>
                    <a href="question-list.html" class="nav-item active" data-section="question">
                        <i class="ri-book-2-line mr-2"></i> 题库管理
                    </a>
                    <a href="#" class="nav-item" data-section="exam">
                        <i class="ri-graduation-cap-line mr-2"></i> 考试管理
                    </a>
                    <a href="#" class="nav-item" data-section="statistics">
                        <i class="ri-bar-chart-2-line mr-2"></i> 数据分析
                    </a>
                    <a href="site-settings.html" class="nav-item" data-section="settings">
                        <i class="ri-settings-3-line mr-2"></i> 系统设置
                    </a>
                </div>
            </div>
            
            <div class="flex items-center">
                <button class="flex items-center justify-center w-8 h-8 text-muted hover:text-primary transition-colors relative">
                    <i class="ri-notification-3-line text-xl"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
                </button>
                <div class="flex items-center ml-1">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <span class="hidden md:inline text-sm font-medium text-dark ml-2">张老师</span>
                    <i class="ri-arrow-down-s-line text-muted ml-0.5"></i>
                </div>
                <button class="md:hidden ml-1 w-8 h-8 flex items-center justify-center text-muted hover:text-primary transition-colors" id="mobile-menu-button">
                    <i class="ri-menu-line text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow flex">
        <!-- 左侧导航栏 -->
        <aside id="sidebar" class="w-56 bg-sidebar-bg shadow-sidebar transition-all duration-300 h-[calc(100vh-72px)] sticky top-[72px] overflow-y-auto">
            <!-- 仪表盘菜单 -->
            <div id="dashboard-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">仪表盘</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-dashboard-3-line"></i>
                        <span>数据概览</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-line"></i>
                        <span>趋势分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-2-line"></i>
                        <span>数据报表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-notification-2-line"></i>
                        <span>系统通知</span>
                    </div>
                </div>
            </div>
            
            <!-- 教材版本菜单 -->
            <div id="textbook-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">教材版本</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>人教版</span>
                    </div>
                    <div class="pl-8">
                        <div class="sidebar-item">
                            <span>七年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>七年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级下册</span>
                        </div>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>北师大版</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>苏教版</span>
                    </div>
                    <div class="border-t border-gray-200 my-2"></div>
                    <div class="sidebar-item">
                        <i class="ri-add-line"></i>
                        <span>添加新版本</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-line"></i>
                        <span>版本管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理菜单 -->
            <div id="question-menu" class="sidebar-menu active">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">题库管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item active">
                        <i class="ri-file-list-3-line"></i>
                        <span>题目列表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>添加题目</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-folder-line"></i>
                        <span>题目分类</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-price-tag-3-line"></i>
                        <span>标签管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-flag-line"></i>
                        <span>待审核题目</span>
                    </div>
                </div>
            </div>
            
            <!-- 考试管理菜单 -->
            <div id="exam-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">考试管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-calendar-line"></i>
                        <span>考试安排</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-file-text-line"></i>
                        <span>试卷管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>创建试卷</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-group-line"></i>
                        <span>考生管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-check-double-line"></i>
                        <span>成绩管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析菜单 -->
            <div id="statistics-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">数据分析</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-bar-chart-line"></i>
                        <span>答题统计</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-fill"></i>
                        <span>学习进度</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-line"></i>
                        <span>正确率分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-line"></i>
                        <span>用户行为</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-download-line"></i>
                        <span>数据导出</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置菜单 -->
            <div id="settings-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">系统设置</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <a href="site-settings.html" class="flex items-center space-x-3">
                            <i class="ri-global-line"></i>
                            <span>站点设置</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-settings-line"></i>
                        <span>注册设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-4-line"></i>
                        <span>基础设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-shield-keyhole-line"></i>
                        <span>安全设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-admin-line"></i>
                        <span>角色权限</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-database-2-line"></i>
                        <span>数据备份</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 内容区域 -->
        <div class="flex-grow p-6">
            <!-- 页面标题 -->
            <div class="mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">试题列表</h2>
                <p class="text-muted mt-2">管理所有试题，支持查看、编辑和删除操作</p>
            </div>

            <!-- 操作栏 -->
            <div class="bg-white rounded-2xl p-6 shadow-card mb-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div class="flex items-center space-x-2">
                        <button class="px-4 py-2 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-colors">
                            <i class="ri-add-line mr-2"></i>添加题目
                        </button>
                        <button class="px-4 py-2 bg-white border border-gray-300 text-dark rounded-lg shadow-sm hover:bg-gray-50 transition-colors">
                            <i class="ri-upload-2-line mr-2"></i>导入题目
                        </button>
                        <button class="px-4 py-2 bg-white border border-gray-300 text-dark rounded-lg shadow-sm hover:bg-gray-50 transition-colors">
                            <i class="ri-download-2-line mr-2"></i>导出题目
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative">
                            <input type="text" placeholder="搜索题目..." class="pl-10 pr-4 py-2 w-full md:w-64 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-muted"></i>
                        </div>
                        <button class="px-4 py-2 bg-white border border-gray-300 text-dark rounded-lg shadow-sm hover:bg-gray-50 transition-colors">
                            <i class="ri-filter-3-line mr-2"></i>筛选
                        </button>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            <div class="bg-white rounded-2xl shadow-card overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary">
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目ID</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目内容</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2001</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">解方程组：{ x + y = 5, 2x - y = 4 }</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 方程组</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2002</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">如果三角形的三边长分别为3、4、5，求这个三角形的面积。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 几何</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2003</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">化简代数式：(a + b)² - (a - b)²</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 代数</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2004</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">一个圆的半径为5cm，求这个圆的面积和周长。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 圆</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2005</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">已知一个等腰三角形的底边长为6cm，腰长为5cm，求这个三角形的高。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 几何</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1001</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">已知二次函数 y = x² + bx + c 的图像经过点 (1, 0) 和 (2, 5)，求 b 和 c 的值。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">数学 > 代数</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-20</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2006</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">一个数列的前三项分别是2、5、8，求这个等差数列的第10项。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 数列</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2007</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">在平面直角坐标系中，点A(2,1)，点B(6,4)，求线段AB的中点坐标。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 坐标系</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2008</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">一个长方体的长、宽、高分别是4cm、3cm、2cm，求这个长方体的表面积和体积。</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 立体几何</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" class="question-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-2009</td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-dark line-clamp-2">如果 sinA = 0.6，求 cosA 的值。（A是锐角）</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">较难</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">初中数学 > 三角函数</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2024-01-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" title="查看">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                    <button class="text-primary hover:text-primary/80 mr-3" title="编辑">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600" title="删除">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="px-6 py-4 bg-white border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <!-- 批量删除按钮 -->
                            <button id="batch-delete-btn" class="hidden px-4 py-2 bg-red-500 text-white rounded-lg shadow-sm hover:bg-red-600 transition-colors">
                                <i class="ri-delete-bin-line mr-2"></i>批量删除
                            </button>
                            <div class="text-sm text-muted">
                                显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">125</span> 条
                            </div>
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="ri-arrow-left-s-line"></i>
                            </button>
                            <button class="px-3 py-1 rounded-lg bg-primary text-white">1</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">2</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">3</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">4</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">5</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">
                                <i class="ri-arrow-right-s-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript 库文件 -->
    <script src="assets/js/tailwind.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f90ff',
                        accent: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        muted: '#64748b',
                        'sidebar-bg': '#f8fafc',
                        'sidebar-item': '#64748b',
                        'sidebar-item-active': '#2563eb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 15px 35px -5px rgba(37, 99, 235, 0.15)',
                        'sidebar': '0 0 20px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        };
    </script>
    
    <!-- 页面功能脚本 -->
    <script>
        // 全选功能和批量删除
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllCheckbox = document.getElementById('select-all');
            const questionCheckboxes = document.querySelectorAll('.question-checkbox');
            const batchDeleteBtn = document.getElementById('batch-delete-btn');

            // 更新批量删除按钮显示状态
            function updateBatchDeleteButton() {
                const checkedCount = Array.from(questionCheckboxes).filter(cb => cb.checked).length;
                if (checkedCount >= 2) {
                    batchDeleteBtn.classList.remove('hidden');
                } else {
                    batchDeleteBtn.classList.add('hidden');
                }
            }

            // 全选/取消全选功能
            selectAllCheckbox.addEventListener('change', function() {
                questionCheckboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
                updateBatchDeleteButton();
            });

            // 单个复选框状态改变
            questionCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const allChecked = Array.from(questionCheckboxes).every(cb => cb.checked);
                    selectAllCheckbox.checked = allChecked;
                    updateBatchDeleteButton();
                });
            });

            // 批量删除按钮点击事件
            batchDeleteBtn.addEventListener('click', function() {
                if (confirm('确定要删除选中的题目吗？')) {
                    // 这里添加删除逻辑
                    console.log('执行批量删除');
                }
            });
        });

        // 用户下拉菜单
        const userDropdownToggle = document.getElementById('user-dropdown-toggle');
        const userDropdown = document.getElementById('user-dropdown');

        if (userDropdownToggle && userDropdown) {
            userDropdownToggle.addEventListener('click', () => {
                userDropdown.classList.toggle('hidden');
            });

            // 点击其他地方关闭下拉菜单
            document.addEventListener('click', (event) => {
                if (!userDropdownToggle.contains(event.target)) {
                    userDropdown.classList.add('hidden');
                }
            });
        }

        // 移动端菜单
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');

        if (mobileMenuButton && sidebar) {
            mobileMenuButton.addEventListener('click', () => {
                sidebar.classList.toggle('-translate-x-full');
            });
        }

        // 侧边栏菜单项点击
        const sidebarItems = document.querySelectorAll('.sidebar-item');
        sidebarItems.forEach(item => {
            item.addEventListener('click', () => {
                const parentMenu = item.closest('.sidebar-menu');
                if (parentMenu) {
                    parentMenu.querySelectorAll('.sidebar-item').forEach(si => {
                        si.classList.remove('active');
                    });
                    item.classList.add('active');
                }
            });
        });
    </script>
</body>
</html> 